<script>
import axios from 'axios'
import userObj from './user.js'
import cityNameJsonData from '../../assets/cityname_cn.json'


export default {
  
        data() {
          return {
            weatherObj: {
               city: ''

            }, //接收天气数据
            isPopup: false, //切换城市菜单显示隐藏
            inputCityVal:'',   //输入input城市名的值
            cityName:''
          }
      },
       methods: {
        // 请求城市天气
        getCityWeatherFn(cityId){
          let weatherUrl = 'http://v1.yiketianqi.com/free/day?appid=' + userObj.user[0].id + '&appsecret=' + userObj.user[0].secret + '&cityid=' + cityId
          axios.get(weatherUrl).then(d => {
            console.log(d.data)
            this.weatherObj = d.data
          })
        },
        // 显示切换城市
        showSwitchCityFn(){
          this.inputCityVal = '';
          this.isPopup = !this.isPopup;
        },
        // 隐藏切换城市
        hideSwitchCityFn(){
          isPopup = false
        },
        // 监听输入城市名
        inputCityNameFn(e){
          // console.log(e.target.value)
          this.cityName = e.target.value
        },
        // 输入城市确认按钮
        confirmBtnFn(){
          if (!this.cityName) {
            console.log('城市名不能为空')
            return
          }
          // console.log(cityName)
          this.filterCityFn(this.cityName)
          // 隐藏菜单
          this.isPopup = false;
        },
        // 筛选城市，cityNameJsonData
        filterCityFn(n){
          console.log(n)
          // 精确过滤城市名对应的json对象
          let result = cityNameJsonData.filter(obj => {
            return obj.cityZh == n
          })
          console.log(result, result[0].id)
          // 根据城市名，获得城市id
          this.getCityWeatherFn(result[0].id)
        }

       },
       //初始化时调用
      created(){

      },
      mounted() {
        // 首次打开页面。城市id，武汉:101070101
        this.getCityWeatherFn(101200101)
        // 监听键盘enter按钮
        document.addEventListener('keyup', (e) => {
        console.log(e.code)
        if (e.code == "Enter") {
          //回车执行，输入城市确认按钮
          this.confirmBtnFn()
      }
    });
  }
}

  
</script>

<template>

  <div class="watherMain">
  
    <ul>
      <li class="li_1">
        <b>{{ weatherObj.city }}</b>
        <i class="btn" @click="showSwitchCityFn">切换</i>
      </li>
      <li class="li_2">{{ weatherObj.update_time }}更新</li>
      <li class="li_3">
        {{ weatherObj.tem_day }}
        <em class="li_7">℃</em>
      </li>
      <li class="li_4">空气质量 {{ weatherObj.air }}</li>
      <li class="li_5">{{ weatherObj.win }} {{ weatherObj.win_speed }}</li>
      <li class="li_6">相对温度 {{ weatherObj.humidity }}</li>
    </ul>
    <div class="popUp" v-show="isPopup">
      <h1 class="switchCity">切换城市</h1>
      <input type="text" v-model="inputCityVal" @change="inputCityNameFn" class="entryCity" placeholder="请输入城市名称" />
      <div>
        <input class="btnInput" @click="confirmBtnFn" type="button" value="确认">
        <input class="btnInput" @click="hideSwitchCityFn" type="button" value="取消">
      </div>
    </div>
    <!-- <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tp&skin=pitaya" frameborder="0" width="160" height="260" allowtransparency="true"></iframe> -->
  </div>

  
</template>

<style scoped>
div.popUp {
  position: absolute;
  left: 48px;
  top: 40px;
  width: 200px;
  height: auto;
  padding: 5px;
  background: #ddd;
  border-radius: 5px;
  border: 1px solid #666;
  box-shadow: 2px 2px 5px rgb(134, 134, 134);
  opacity: .9;
}

input.btnInput {
  background: #24517f;
  color: #fff;
  margin-right: 10px;
  padding: 2px 3px;
  margin-top: 5px;
  border-radius: 5px;
}

input.entryCity {
  height: 20px;
  border: 1px solid #7e7e7e;
  margin-bottom: 10px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 5px;
}

h1.switchCity {
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 10px;
}

div.watherMain {
  width: 300px;
  height: 150px;
  background: #eee;
  border: 1px solid #8f8f8f;
  border-radius: 10px;
  position: relative;
  font-size: 12px;
  margin-left: 10px;
  margin-top: 10px;
}

div.watherMain li {
  position: absolute;
}

div.watherMain li.li_1 {
  top: 10px;
  left: 10px;
}

div.watherMain li.li_1 i.btn {
  font-size: 10px;
  padding: 2px;
  background: rgb(210, 253, 255);
  margin-left: 10px;
  border-radius: 5px;
  border: 1px solid rgb(22, 178, 218);
  cursor: pointer;
}

div.watherMain li.li_2 {
  top: 10px;
  left: 180px;
}

div.watherMain li.li_3 {
  top: 60px;
  left: 30px;
  font-size: 66px;
}

div.watherMain li.li_4 {
  top: 45px;
  left: 180px;
  background: rgb(248, 208, 97);
  padding: 0 20px;
  border-radius: 15px;
}

div.watherMain li.li_5 {
  top: 80px;
  left: 190px;
}

div.watherMain li.li_6 {
  top: 100px;
  left: 190px;
}

div.watherMain em.li_7 {
  position: relative;
  top: -27px;
  left: -15px;
  font-size: 20px;
  font-weight: bold;
}

/* ============ */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

ul,
ol,
li {
  list-style: none;
}

p {
  margin: 0;
  padding: 0;
  font-size: 22px;
}
</style>
